<template>
	<view class="rechargeResult">
		<view class="pageHead">
			<view class="headStatus" :style="{height: sysHeight}"></view>
			<view class="headNav">
				<view class="iconfont icon-fanhui2" @tap="returns"></view>
				<view class="headTitle">
				</view>
			</view>
		</view>
		<view class="bodyWrap" :style="{height: 'calc(100vh - ' + headH + ')'}">
			<view class="speedWrap">
				<view class="stepsLine">
					<view class="complete" :style="{height: `${speed}%`}"></view>
				</view>
				<view class="itemWrap">
					<image class="statusImg" src="/static/images/complete.png" mode=""></image>
					<view class="itemRgt">
						<view class="rgtTitle">
							پۇل تۈلەش غەلىبىك بولدى
						</view>
						<view class="rgtTip">
							{{pageData && pageData.payMoney}}
						</view>
					</view>
				</view>
				<view class="itemWrap">
					<image v-show="speed === 100" class="statusImg" src="/static/images/complete.png" mode=""></image>
					<image v-show="speed < 100 && speed > 50" class="statusImg" src="/static/images/conduct.png" mode=""></image>
					<image v-show="speed === 0" class="statusImg" src="/static/images/start.png" mode=""></image>
					<view class="itemRgt">
						<view class="rgtTitle">
							قاچىلىنۋاتىدۇ ...
						</view>
						<view class="rgtTip">
							{{pageData && pageData.recharge}}
							<b/>
							{{pageData && pageData.paymentTime}}
						</view>
					</view>
				</view>
				<view class="itemWrap">
					<image v-show="speed === 100" class="statusImg" src="/static/images/complete.png" mode=""></image>
					<image v-show="speed < 100" class="statusImg" src="/static/images/start.png" mode=""></image>
					<view class="itemRgt" v-if="resultStatus !== 0">
						<view class="rgtTitle">
							{{resultStatus === 2 ? 'مەغلۇپ بولدى' : 'قاچىلاش غەلبىلىك بولدى'}}
						</view>
						<view class="rgtTip" style="height: auto;">
							{{pageData.successfulReminder}}
						</view>
					</view>
				</view>
			</view>
			<view class="btnWrap">
				<view class="btnBody">
					<view class="completeBtn" @click="returns" v-if="isShowCompleteBtn">
						تاماملاندى
					</view>
					<view class="lookBtn" @click="lookOrder">
						تالوننى تەكشۈرۈش
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { violationOrderStatus, electricOrderStatus, telephoneOrderStatus, teleflowOrderStatus } from "@/api/dailyLife.js"
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let headH= uni.getSystemInfoSync().statusBarHeight + 43 + 'px';
	export default {
		data() {
			return {
				sysHeight: sysHeight,
				headH: headH,
				speed: 0,
				isShowCompleteBtn: true,
				pageType: '4', // 1 火车票 2飞机票 3违章 4电费 5话费 6流量
				timer: null,
				orderId: '',
				orderNo: '',
				pageData: null,
				resultStatus: 0,
			};
		},
		methods: {
			// 后退
			returns() {
				return uni.navigateBack({
					delta: 1,
				})
			},
			// 订单状态查询
			async orderStatusQuery () {
				let resData;
				let params = {
					orderId: this.orderId, // 订单号 
					orderNo: this.orderNo // 订单编号
				}
				// 违章订单状态查询
				if (this.pageType === '3') {
					resData = await violationOrderStatus(params)
				}
				// 电费订单状态查询
				if (this.pageType === '4') {
					resData = await electricOrderStatus(params)
				}
				// 话费状态查询
				if (this.pageType === '5') {
					resData = await telephoneOrderStatus(params)
				}
				// 流量状态查询
				if (this.pageType === '6') {
					resData = await teleflowOrderStatus(params)
				}
				if (resData.code === 1) {
					uni.hideLoading();
					this.pageData = resData.data;
					this.$nextTick(() => {
						if (resData.data.status === 0) {
							this.speed = 70;
							clearTimeout(this.timer);
							this.timer = setTimeout(() => {
								this.orderStatusQuery();
							}, 5000);
						}
						if (resData.data.status === 1 || resData.data.status === 2) {
							this.speed = 100;
						}
						this.resultStatus = resData.data.status;
					})
					
				}
				if (resData.code === 0) {
					clearTimeout(this.timer);
					this.timer = setTimeout(() => {
						this.orderStatusQuery();
					}, 5000);
				}
			},
			// 查看订单
			lookOrder() {
				uni.redirectTo({
					url: `/pages/order/orderList/index?orderType=${this.pageType}`
				})
			},
			// 页面加载
			loadPage() {
				// 进度条改变
				this.$nextTick(() => {
					setTimeout(() => {
						this.speed = 75;
					}, 1000)
				})
			}
		},
		
		onLoad(options) {
			// 是否显示完成按钮
			if (options.isShowBtn !== undefined) {
				this.isShowCompleteBtn = options.isShowBtn;
			}
			this.pageType = options.pageType || '4';
			this.orderNo = options.orderNo || '';
			this.orderId = options.orderId || '';
			uni.showLoading({
				title: ''
			});
			this.orderStatusQuery();
		},
		onUnload() {
			clearTimeout(this.timer);
		}
	}
	
</script>

<style lang="scss">
	.rechargeResult {
		width: 750rpx;
		min-height: 100vh;
		background: linear-gradient(180deg, #FDD048 0%, #FAF6ED 100%);
		.pageHead {
			position: flex;
			.headStatus {
				width: 100%;
			}
			.headNav {
				display: flex;
				height: 43px;
				line-height: 43px;
				text-align: center;
				font-size: 36rpx;
				color: #333;
				.icon-fanhui2 {
					position: absolute;
					left: 40rpx;
				}
				.headTitle {
					width: 100%;
					height: 43px;
					line-height: 43px;
					width: 100%;
					text-align: center;
				}
			}
		}
		.bodyWrap {
			overflow-y: auto;
			.speedWrap {
				padding: 40rpx 68rpx;
				position: relative;
				.itemWrap {
					display: flex;
					position: relative;
					z-index: 10;
					.statusImg {
						min-width: 50rpx;
						width: 50rpx;
						height: 50rpx;
					}
					.itemRgt {
						flex: 1;
						padding-left: 22rpx;
						.rgtTitle {
							font-size: 36rpx;
							font-weight: 600;
							color: #333333;
						}
						.rgtTip {
							height: 130rpx;
							margin-top: 10rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #666666;
						}
					}
				}
				.stepsLine {
					width: 2rpx;
					height: 390rpx;
					background: #FFFFFF;
					position: absolute;
					left: 94rpx;
					top: 70rpx;
					z-index: 1;
					.complete {
						width: 2rpx;
						background: #EA5710;
						transition: 0.5s;
					}
				}
			}
			.btnWrap {
				padding: 60rpx;
				width: 100%;
				.btnBody {
					border-top: 1px solid #F0F0F0;
					padding-top: 104rpx;
					display: flex;
					justify-content: center;
					.completeBtn {
						width: 268rpx;
						text-align: center;
						border-radius: 50rpx;
						border: 2rpx solid #999999;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
						margin-right: 34rpx;
						padding: 10rpx 0;
					}
					.lookBtn {
						width: 268rpx;
						text-align: center;
						border-radius: 50rpx;
						border: 2rpx solid #999999;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
						padding: 10rpx 0;
					}
				}
			}
		}
	} 
</style>
